import React from 'react';
import ClassNames from 'classnames';
import { useOpenInstall } from '@/common/hooks';
import LogoPrimary from '@/assets/images/logo_primary.png';
import Set1Image from '@/assets/images/download/help/set_1_image.png';
import Set2Image from '@/assets/images/download/help/set_2_image.png';

import styles from './style.scss';

const DownloadHelpPage = () => {
  const { wakeupOrInstall } = useOpenInstall();

  return (
    <main className={styles.container}>
      <img className={styles.logo} src={LogoPrimary} />
      <div className={styles.downTips}>
        <div className={styles.tipsItem}>
          <div className={styles.tipsIcon}>1</div>
          <div className={styles.tipsLabel}>下载安装</div>
        </div>
        <div className={styles.tipsItem}>
          <div className={styles.tipsIcon}>2</div>
          <div className={styles.tipsLabel}>设置信任</div>
        </div>
      </div>
      <div className={styles.card}>
        <div className={styles.step}>1</div>
        <div className={styles.title}>
          <span className={styles.titleLabel}>下载安装: 鑫球直播</span>
        </div>
        <div className={styles.download} onClick={wakeupOrInstall}>立即安装</div>
      </div>
      <div className={styles.card}>
        <div className={styles.step}>2</div>
        <div className={styles.title}>
          <p className={styles.titleItem}>
            <span className={styles.titleLabel}>安装成功后，打开</span>
            <span className={ClassNames(styles.titleLabel, styles.isPrimary)}>设置</span>
            <span className={styles.titleLabel}>，点击</span>
            <span className={ClassNames(styles.titleLabel, styles.isPrimary)}>通用设置</span>
          </p>
          <p className={styles.titleItem}>
            <span className={styles.titleLabel}>找到</span>
            <span className={ClassNames(styles.titleLabel, styles.isPrimary)}>设备管理</span>
          </p>
        </div>
        <img className={styles.setImage} src={Set1Image} />
        <div className={styles.title}>
          <p className={styles.titleItem}>
            <span className={styles.titleLabel}>点击进入设备管理</span>
          </p>
          <p className={styles.titleItem}>
            <span className={styles.titleLabel}>找到</span>
            <span className={ClassNames(styles.titleLabel, styles.isPrimary)}>鑫球直播</span>
            <span className={styles.titleLabel}>并点击信任</span>
          </p>
        </div>
        <img className={styles.setImage} src={Set2Image} />
      </div>
    </main>
  );
};

export default DownloadHelpPage;
